<template>
    <van-nav-bar title="项目" left-arrow @click-left="back()"></van-nav-bar>
    <view style="margin-top:25px">
        <view class="existxm">
            <span>维修单号：</span>
            <span style="margin-top:2.5px">{{state.item.id}}</span>
        </view>
        <view class="existxm">
            <span style="font-size:20px;font-weight:600">已有项目</span>
        </view>
        <view v-for="item in state.ex_hourPayList" :key="item.project_name" class="existxm" style="margin-top:10px">
            <span class="xmname">{{item.project_name}}</span>
            <span class="xmcount"> x1 </span>
        </view>
        <view class="existxm">
            <span style="font-size:20px;font-weight:600">添加项目</span>
        </view>
        <view v-for="item in state.pre_add_list" :key="item.project_name" class="existxm" style="margin-top:10px">
            <span class="xmname">{{item.project_name}}</span>
            <van-button style="color:red;height:1.5rem;margin-left:1rem" @click="clickReduce(item)">删除</van-button>
        </view>
        <van-search
            v-model="state.searchValue"
            show-action
            placeholder="请输入搜索关键词"
            @search="onSearch"
            style="margin-top:5px"
        >
            <template #action>
                <div @click="onSearch" style="margin-left:0px">搜索</div>
            </template>
        </van-search>
        <view v-for="item in state.hourPayList" :key="item.project_name" class="existxm" style="margin-top:10px">
            <span class="xmname" style="margin-left:0px;margin-top:10px">{{item.project_name}}（￥{{item.project_fee}}）</span>
            <van-button style="margin-left:20px" @click="clickPlus(item)">+</van-button>
        </view>
        <footer>
            <van-button color="#60348d" class="changeCode" @click="clickSure" :disabled="state.pre_add_list.length<=0">确认添加</van-button>
        </footer>
        <van-dialog v-model:show="state.showConfirmDialog" title="确认增加项目？" show-cancel-button messageAlign="left" confirmButtonText="确认" @confirm="confirmCancel()">   
        </van-dialog>
    </view>
</template>

<script setup>
    import {computed, onMounted, reactive, ref} from 'vue'
    import { useRoute, useRouter } from 'vue-router';
    import { getHourPayList,updateRepairOrdersv2 } from 'api/repair.js'
    import {useStore} from 'vuex'
    import axios from "axios";

    const router = useRouter()
    const route = useRoute()
    const store = useStore()

    //本组件的状态
    const state = reactive({
        item : {},
        hourPayList:[],
        ex_fittingsList:[], //已添加的零配件列表
        ex_hourPayList:[],  //已添加的工时费列表
        loading: false,
        finished: false,
        pre_add_list : [],  //待添加的项目
        origin_hourPayList: [],
        searchValue : "",
        showConfirmDialog:false
    });
    

    const back = () => {
        router.back();
    }

    const query = async ()=>{
        var userInfo = store.getters['user/users'];
        let res = await getHourPayList({type:2,id:userInfo.storeId})
        console.log(res);
        if(res.code == "0"){
            state.origin_hourPayList = res.data.hasRulesStore
            state.hourPayList = res.data.hasRulesStore
        }
        console.log(res);
    }

    
    onMounted(()=>{
        let targetItem = route.query;
        state.item = targetItem;
        if(targetItem.fittingsList != undefined){
            state.ex_fittingsList = JSON.parse(targetItem.fittingsList);
        }
        if(targetItem.hourPayList != undefined){
            state.ex_hourPayList = JSON.parse(targetItem.hourPayList);
        }
        query();
    })

    const clickPlus = (item) => {
        state.pre_add_list.push(item);
    }

    const clickReduce = (item) => {
        var index = state.pre_add_list.indexOf(item);
        if(index > -1){
            state.pre_add_list.splice(index,1)
        }
    }

    const onSearch = () => {
        if(state.searchValue.length == 0){
            state.hourPayList = state.origin_hourPayList;
        }else{
            var resultArray = [];
            for(var i = 0; i < state.origin_hourPayList.length; i ++){
                var item = state.origin_hourPayList[i];
                if(item.project_name.indexOf(state.searchValue) > -1){
                    resultArray.push(item);
                }
            }
            state.hourPayList = resultArray;
        }
    }

    const clickSure = () => {
        state.showConfirmDialog = true;

    }

    const confirmCancel = async () => {
        //网络请求添加项目
        const paramArray = state.ex_hourPayList.concat(state.pre_add_list);
        var p = {
            id:state.item.id,
            hourPayList:JSON.stringify(paramArray)
        }
        let res = await updateRepairOrdersv2(p)
        if(res.code == "0"){
            alert('添加项目成功!');
            back();
        }
    }

    
</script>

<style scoped>
.existxm{
    display: flex;
    flex-direction: row;
    margin-top: 25px;
    margin-left: 25px;
}
.xmcount{
    margin-left:20px;
    margin-top:2px;
}
.changeCode{
    width: 18.125rem;
    height: 2.75rem;
    border-radius: 1.375rem;
    color: #fff;
    font-size: 1.125rem;
    margin-top:1rem;
    margin-bottom: 1rem;
}
</style>